<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        input[type="text"] {
            border: none;
            text-align: center;
            outline: none;
            width: 30px;
        }

        .jiajian {
            border: 1px solid #333;
            border-radius: 10px;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            color: #333333;
        }

        .xuanzhong {
            color: darkorange;
        }

        img {
            width: 100px;
            height: 100px;
        }

        tr>th,
        tr>td {
            width: 130px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <table border="0" cellspacing="" cellpadding="">
        <tr style="display: flex;align-items: center;">
            <th >

                <span @click="allselect">全选</span>
                /
                <span @click="allcancel">全不选</span>
            </th>
            <th>商品名</th>
            <th>商品图片</th>
            <th>单价</th>
            <th>数量</th>
        </tr>
        <tr v-for="(item,index) in arr" :class="{xuanzhong:item.checked}" style="display: flex;align-items: center;">
            <td>
                <input type="checkbox" v-model="item.checked" />
            </td>
            <td>{{item.name}}</td>
            <td>
                <img v-bind:src="item.imgUrl">
            </td>
            <td>{{item.price}}</td>
            <td style="display: flex;justify-content: center;color: #333333;">
                <span class="jiajian" @click="if(--item.count == 0) item.count=1">-</span>
                <span style="margin: 0 10px;width: 20px;">{{item.count}}</span>
                <span class="jiajian" @click="item.count++">+</span>
            </td>
        </tr>
    </table>
    总价：<span>{{total.toFixed(2)}}</span>
    <br> <button type="button" @click="del">删除所选内容</button>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        computed: {
            total() {
                let sum = 0;
                this.arr.map((item, index) => {
                    if (item.checked) sum += item.price * item.count
                })
                return sum
            }
        },
        data: {
            arr: [{
                name: '手机',
                imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=400&h=400&f=webp&q=90',
                price: 10.1,
                count: 1,
                checked: true
            }, {
                name: '电视',
                imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef4c68fed730ec26bf2fa0ff620975c5.jpg?thumb=1&w=400&h=400&f=webp&q=90',
                price: 110.1,
                count: 1,
                checked: true
            }, {
                name: '洗衣机',
                imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec20453216dcd42f982cffe5fdbc3115.jpg?thumb=1&w=400&h=400&f=webp&q=90',
                price: 210.1,
                count: 1,
                checked: false
            }, {
                name: '耳机',
                imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50649d7b5706f4cd9f658e93db6b6564.jpg?thumb=1&w=400&h=400&f=webp&q=90',
                price: 20.1,
                count: 1,
                checked: false
            }]
        },
        methods: {
            handleChange(value) {
                console.log(value);
            },
            del() {
                var xuanzhong = false;
                this.arr.map((item, index) => {
                    if (item.checked) {
                        xuanzhong = true;
                    }
                })
                if (!xuanzhong) {
                    alert('请打勾')
                    return;
                }
                this.arr = this.arr.filter(item => !item.checked)
                if (this.arr.length == 0) {
                    window.location.href = 'none.html'
                }
            },
            allselect() {
                this.arr.map(item => item.checked = true)
            },allcancel(){
                this.arr.map(item => item.checked = false)
            }
        }
    });
</script>
</html>
